<template>
  <div>
    <div ref="wall" style="height: 500px"></div>
  </div>
</template>

<script>
  let echarts = require('echarts');
  require('echarts-wordcloud');
  export default {
    data() {
      return {
        image: ""
      }
    },
    props: {
      value: {
        type: Array
      },
    },
    mounted() {
      this.cloud()
      console.log(JSON.stringify(this.value))
    },
    methods: {
      cloud() {

        let maskImage = new Image();
        maskImage.src = this.image;

        this.$refs.wall.style.width = window.innerWidth / 1.3 + 'px';

        let myCharts = this.$echarts.init(this.$refs.wall);

        let option = {
          backgroundColor: '#fff',
          tooltip: {
            show: false
          },
          series: [{
            type: 'wordCloud',
            gridSize: 1,
            sizeRange: [12, 55],
            rotationRange: [-45, 0, 45, 90],
            /*              maskImage: maskImage,*/
            textStyle: {
              normal: {
                color: function () {
                  return 'rgb(' +
                    Math.round(Math.random() * 255) +
                    ', ' + Math.round(Math.random() * 255) +
                    ', ' + Math.round(Math.random() * 255) + ')'
                }
              }
            },
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            data: this.value
          }]
        };

        myCharts.setOption(option);

      }
    }
  }
</script>

<style scoped>

</style>
